<template>
  <div class="personal">
    <div class="banxin">
      <Breadcrumb :arr="navs"></Breadcrumb>
      <div class="container flex">
        <aside>
          <div class="user">
            <img :src="$store.state.userInfo.headImg" alt="" />
            <div class="flex">
              <span>{{ $store.state.userInfo.nickName }}</span>
              <span class="exit" @click="exit">退出</span>
            </div>
          </div>
          <div class="jiaoyi list">
            <h3>
              <img src="../assets/images/person/transaction.png" alt="" />
              <span>交易管理</span>
            </h3>
            <ul>
              <li
                @click="$router.push('/personal/user')"
                :class="{ active: /\/user/.test($route.path) }"
              >
                个人中心
              </li>
              <li :class="{ active: /\/order/.test($route.path) }">我的订单</li>
              <li
                @click="$router.push('/personal/cart')"
                :class="{ active: /\/cart/.test($route.path) }"
              >
                购物车
              </li>
              <li :class="{ active: /\/msg/.test($route.path) }">消息通知</li>
              <li :class="{ active: /\/coin/.test($route.path) }">鸡腿明细</li>
              <li :class="{ active: /\/gonglue/.test($route.path) }">
                鸡腿攻略
              </li>
            </ul>
          </div>
          <div class="info list">
            <h3>
              <img src="../assets/images/person/transaction.png" alt="" />
              <span>个人信息管理</span>
            </h3>
            <ul>
              <li>地址管理</li>
              <li>账号安全</li>
            </ul>
          </div>
        </aside>
        <div class="right">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Breadcrumb from "../components/common/Breadcrumb.vue";
export default {
  data() {
    return {
      navs: [
        { path: "/home", text: "首页" },
        { path: "/personal", text: "个人中心", isLast: true },
      ],
    };
  },
  components: { Breadcrumb },
  methods: {
    exit() {
      // 退出
      // 清空token
      localStorage.removeItem("x-auth-token");
      // 清空vuex里面的userInfo
      this.$store.commit("updateUserInfo", {});
      // 跳转到home
      this.$router.push("/home");
      // 可以把topHead里面的数据和vuex绑定，也可以强制更新tophead组件
      this.$store.commit("updateTopHeadKey");
    },
  },
};
</script>
.<style lang="less" scoped>
.personal {
  .container {
    height: 830px;
    margin-top: 20px;
    margin-bottom: 50px;
    padding-top: 20px;
    border-top: 1px solid #ccc;
  }
  aside {
    width: 160px;
    height: 740px;
    padding: 20px;
    background-color: #e7e7e7;
    .user {
      text-align: center;
      img {
        width: 102px;
        height: 100px;
      }
      .flex {
        justify-content: center;
        span {
          margin-right: 20px;
          line-height: 50px;
          &.exit {
            color: blue;
            cursor: pointer;
          }
        }
      }
    }
    .list {
      h3 {
        display: flex;
        height: 40px;
        align-items: center;
        img {
          width: 25px;
          height: 25px;
          margin-right: 10px;
        }
      }
      ul {
        li {
          line-height: 34px;
          height: 34px;
          font-style: 14px;
        }
        &.active {
          span {
            border-left: 1px solid #4488ff;
            color: #4488ff;
            padding-left: 10px;
          }
        }
      }
    }
  }
  .right {
    flex: 1;
    margin-left: 20px;
  }
}
</style>